<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="文章详情"> 文章详细信息 </n-card>
    </div>
    <n-card :bordered="false" class="mt-4 proCard" size="small" :segmented="{ content: true }">
      <n-descriptions label-placement="left" class="py-2">
        <n-descriptions-item>
          <template #label>文章ID</template>
          {{ article.articleID }}
        </n-descriptions-item>
        <n-descriptions-item label="标题">{{ article.title }}</n-descriptions-item>
        <n-descriptions-item label="作者ID">{{ article.authorID }}</n-descriptions-item>
        <n-descriptions-item label="创建时间">{{ formatDate(article.creationTime) }}</n-descriptions-item>
        <n-descriptions-item label="点赞数">{{ article.likeCount }}</n-descriptions-item>
        <n-descriptions-item label="收藏数">{{ article.favoriteCount }}</n-descriptions-item>
        <n-descriptions-item label="评论数">{{ article.commentCount }}</n-descriptions-item>
        <n-descriptions-item label="推荐指数">{{ article.recommendationIndex }}</n-descriptions-item>
        <n-descriptions-item label="标签">{{ article.tag }}</n-descriptions-item>
        <n-descriptions-item label="状态">
          <n-tag :type="getStatusType(article.status)">{{ getStatusText(article.status) }}</n-tag>
        </n-descriptions-item>
      </n-descriptions>
      
      <n-divider />
      
      <div class="article-content">
        <h3>文章内容</h3>
        <div class="content-box">{{ article.content }}</div>
      </div>
      
      <n-divider />
      
      <!-- 文章图片展示区域 -->
      <div v-if="articleImages.length > 0" class="article-images">
        <h3>文章图片</h3>
        <n-grid :cols="3" :x-gap="12" :y-gap="12">
          <n-grid-item v-for="(image, index) in articleImages" :key="index">
            <n-card hoverable>
              <template #cover>
                <img :src="image" class="article-image" />
              </template>
            </n-card>
          </n-grid-item>
        </n-grid>
      </div>
      
      <n-divider />
      
      <div class="action-buttons">
        <n-space>
          <n-button type="success" @click="handlePublish" :disabled="article.status === 'published' || article.status === 'deleted'">
            发布文章
          </n-button>
          <n-button type="warning" @click="handleDraft" :disabled="article.status === 'draft' || article.status === 'deleted'">
            打回草稿
          </n-button>
        </n-space>
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';
import { AdminManagementApi } from '@/api/new/AdminManagementApi';
import { TravelNoteApi } from '@/api/new/travelNoteApi';

const route = useRoute();
const router = useRouter();
const message = useMessage();

const article = ref({
  articleID: 0,
  authorID: 0,
  title: '',
  content: '',
  likeCount: 0,
  favoriteCount: 0,
  commentCount: 0,
  creationTime: new Date(),
  recommendationIndex: 0,
  longitude: 0,
  latitude: 0,
  tag: '',
  status: '',
});

const articleImages = ref([]);
const loading = ref(false);

// 状态映射
const statusMap = {
  draft: '草稿',
  published: '已发布',
  pendingReview: '待审核',
  deleted: '已删除',
};

// 状态标签类型映射
const statusTypeMap = {
  draft: 'default',
  published: 'success',
  pendingReview: 'warning',
  deleted: 'error',
};

onMounted(async () => {
  const id = Number(route.params.id);
  if (id) {
    loading.value = true;
    try {
      // 获取文章详情
      const data = await TravelNoteApi.getArticleById(id);
      article.value = data;
      
      // 获取文章图片
      try {
        const images = await TravelNoteApi.getArticleImages(id);
        articleImages.value = images;
      } catch (error) {
        console.error('获取文章图片失败:', error);
        // 图片获取失败不影响整体功能
      }
    } catch (error) {
      message.error('获取文章详情失败: ' + error.message);
    } finally {
      loading.value = false;
    }
  }
});

// 格式化日期
function formatDate(date) {
  if (!date) return '';
  return new Date(date).toLocaleString();
}

// 获取状态文本
function getStatusText(status) {
  return statusMap[status] || status;
}

// 获取状态标签类型
function getStatusType(status) {
  return statusTypeMap[status] || 'default';
}

// 发布文章
async function handlePublish() {
  try {
    await AdminManagementApi.publishArticle(article.value.articleID);
    message.success('文章已发布');
    article.value.status = 'published';
  } catch (error) {
    message.error('操作失败: ' + error.message);
  }
}

// 设置为草稿
async function handleDraft() {
  try {
    await AdminManagementApi.draftArticle(article.value.articleID);
    message.success('文章已设置为草稿');
    article.value.status = 'draft';
  } catch (error) {
    message.error('操作失败: ' + error.message);
  }
}
</script>

<style lang="less" scoped>
.article-content {
  margin: 16px 0;
  
  .content-box {
    padding: 16px;
    background-color: #f9f9f9;
    border-radius: 4px;
    min-height: 200px;
    white-space: pre-wrap;
  }
}

.article-images {
  margin: 16px 0;
  
  .article-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
  }
}

.action-buttons {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
</style>
